<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      background-color: #eee;
      width: 300px;
      height: 300px;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width = '500'  height = '500'></canvas>
</body>
</html>
<script>
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let x = canvas.width / 2, y = canvas.height/2;
  ctx.save();
  function draw() {
    ctx.translate(x,y);// 坐标原点设置到x,y的位置
    // 画圆盘

    ctx.save()
    ctx.beginPath();
    ctx.arc(0,0,240,0,Math.PI * 2)
    // ctx.strokeStyle = 'rgba(0,0,0,0.5)'
    // ctx.lineWidth = 10;
    ctx.fillStyle = 'rgba(0,0,0,0.2)'
    ctx.stroke()
    ctx.fill()
    ctx.restore()

    // 绘制小时
    let houreAry = [3,4,5,6,7,8,9,10,11,12,1,2];
    ctx.font = '20px 微软雅黑';
    ctx.strokeStyle = 'yellow'
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    houreAry.forEach((item,index)=>{
      let rad = Math.PI*2/12*index;
      let x = 190 * Math.cos(rad),
          y = 190 * Math.sin(rad);
      ctx.strokeText(item,x,y)
    })

    // 绘制点
    for(let i = 0; i < 60 ; i++){
      ctx.beginPath();
      ctx.save();
      let rad = Math.PI *2 /60 * i;
      let x = Math.cos(rad)*220,
          y = Math.sin(rad)*220;
      if(i % 5 == 0){
        ctx.strokeStyle = '#333'
        ctx.arc(x,y,5,0,Math.PI * 2)
      }else{
        ctx.strokeStyle = '#000'
        ctx.arc(x,y,3,0,Math.PI * 2)
      }
      ctx.stroke();
      ctx.restore()
    }
  }

  function darwHourLine(h,m){
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#000'
    let rad = Math.PI *2 / 12 * (h + m/60);
    ctx.rotate(rad)
    ctx.moveTo(0,20);
    ctx.lineTo(0,-150);
    ctx.stroke();
    ctx.restore()
  }
  function darwMinLine(m){
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = '#333'
    let rad = Math.PI *2 / 60 * m;
    ctx.rotate(rad)
    ctx.moveTo(0,20);
    ctx.lineTo(0,-180);
    ctx.stroke();
    ctx.restore()
  }
  function darwSecLine(s){
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#f00'
    let rad = Math.PI *2 / 60 * s;
    ctx.rotate(rad)
    ctx.moveTo(0,20);
    ctx.lineTo(0,-200);
    ctx.stroke();
    ctx.restore()
  }
  function drawDot(){
    ctx.save();
    ctx.beginPath();
    ctx.arc(0,0,8,0,Math.PI * 2);
    ctx.fill();
    ctx.restore()
  }

  let timer = setInterval(() => {
    ctx.clearRect(0,0,500,500)
    let date = new Date();
    let h = date.getHours(),
        m = date.getMinutes(),
        s = date.getSeconds();
    ctx.save()
    draw()
    darwHourLine(h,m)
    darwMinLine(m)
    darwSecLine(s)
    drawDot()
    ctx.restore()
  }, 1000);


  
</script>